import React, { useEffect } from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Account from '@/pages/Account'
import HomeTabs from './HomeTabs'
import Listen from '@/pages/Listen'
import Found from '@/pages/Found'
import Icon from '@/assets/iconfont/index'
import { RootStackNavigation, RootStackParamList } from './index';
import { RouteProp, getFocusedRouteNameFromRoute } from '@react-navigation/native';

export type BottomTabParamList = {
    Account: undefined;
    HomeTabs: undefined,
    Listen: undefined,
    Found: undefined
}
const Tab = createBottomTabNavigator<BottomTabParamList>();
type Route = RouteProp<RootStackParamList, 'BottomTabs'>
interface IProps {
    navigation: RootStackNavigation,
    route: Route
}

function getHeaderTitle(route: Route) {
    const routeName = getFocusedRouteNameFromRoute(route)

    switch (routeName) {
        case 'HomeTabs':
            return '首页';
        case 'Listen':
            return '我听';
        case 'Found':
            return '发现';
        case 'Account':
            return '账户';
        default:
            return '首页';
    }
}

function BottomTabs(props: IProps) {
    const { navigation, route } = props;


    const setOptions = () => {
        const routeName = getFocusedRouteNameFromRoute(route);
        if (!routeName || routeName === 'HomeTabs') {
            navigation.setOptions({
                headerTransparent: true,
                headerTitle: '',
            });
        } else {
            navigation.setOptions({
                headerTransparent: false,
                headerTitle: getHeaderTitle(route),
            });
        }
    }

    useEffect(() => {
        setOptions()
    })
    return (
        <Tab.Navigator
            tabBarOptions={{
                activeTintColor: "#f86442"
            }}
        >
            <Tab.Screen
                name="HomeTabs"
                component={HomeTabs}
                options={{
                    tabBarLabel: "首页",
                    tabBarIcon: ({ color, size }) => <Icon name="icon-shouye" size={size} color={color} />
                }}
            />

            <Tab.Screen
                options={{
                    tabBarLabel: "我听",
                    tabBarIcon: ({ color, size }) => <Icon name="icon-shoucang" size={size} color={color} />
                }}
                name="Listen"
                component={Listen}
            />
            <Tab.Screen
                options={{
                    tabBarLabel: "发现",
                    tabBarIcon: ({ color, size }) => <Icon name="icon-faxian" size={size} color={color} />
                }}
                name="Found"
                component={Found}
            />
            <Tab.Screen
                options={{
                    tabBarLabel: "账户",
                    tabBarIcon: ({ color, size }) => <Icon name="icon-user" size={size} color={color} />
                }}
                name="Account"
                component={Account}
            />
        </Tab.Navigator>
    );
}

export default BottomTabs